<template>
  <a-row class="descriptions" type="flex" :gutter="gutter">
    <a-col v-for="item of columns" :key="item.key" :style="item.style" :span="item.colSpan || colSpan">
      <template v-if="itemCol">
        <a-row type="flex" :gutter="0">
          <a-col
            class="descriptions-label"
            :span="item.labelCol || itemCol.label"
            :style="getLabelStyle(item.labelStyle)"
          >
            <slot v-if="$slots[item.key + ':label']" :name="item.key + ':label'" :scope="item.label"></slot>
            <slot v-else-if="$slots['label']" name="label" :scope="item.label"></slot>
            <span v-else>{{ item.label }}</span>
            <span v-if="semi">：</span>
          </a-col>
          <a-col
            class="descriptions-value"
            :span="item.wrapperCol || itemCol.wrapper"
            :style="getWrapperStyle(item.wrapperStyle)"
          >
            <slot
              v-if="$slots[item.key + ':wrapper']"
              :name="item.key + ':wrapper'"
              :scope="dataSource[item.key]"
            ></slot>
            <slot v-else-if="$slots['wrapper']" name="wrapper" :scope="dataSource[item.key]"></slot>
            <span v-else>{{ dataSource[item.key] }}</span>
          </a-col>
        </a-row>
      </template>
      <template v-else>
        <span class="descriptions-label" :style="getLabelStyle(item.labelStyle)">
          <slot v-if="$slots[item.key + ':label']" :name="item.key + ':label'" :scope="item.label"></slot>
          <slot v-else-if="$slots['label']" name="label" :scope="item.label"></slot>
          <span v-else>{{ item.label }}</span>
          <span v-if="semi">：</span>
        </span>
        <span class="descriptions-value" :style="getWrapperStyle(item.wrapperStyle)">
          <slot v-if="$slots[item.key + ':wrapper']" :name="item.key + ':wrapper'" :scope="dataSource[item.key]"></slot>
          <slot v-else-if="$slots['wrapper']" name="wrapper" :scope="dataSource[item.key]"></slot>
          <span v-else>{{ dataSource[item.key] }}</span>
        </span>
      </template>
    </a-col>
  </a-row>
</template>

<script>
export default {
  name: 'descriptions',
  props: {
    /* [ { key:"",label:"",colSpan: 12,labelCol: 6,wrapperCol: 18,style:{},labelStyle:{},wrapperStyle:{} } ] */
    columns: { type: Array, default: () => [] },
    dataSource: { type: Object, default: () => ({}) },
    gutter: { type: Number, default: 0 },
    colSpan: { type: Number, default: 12 },
    labelCol: { type: Number, default: undefined },
    wrapperCol: { type: Number, default: undefined },
    labelStyle: { type: Object, default: () => ({}) },
    wrapperStyle: { type: Object, default: () => ({}) },
    semi: { type: Boolean, default: true },
  },
  computed: {
    itemCol() {
      const { labelCol, wrapperCol } = this;
      const isNum = (num) => typeof num === 'number' && !isNaN(num);
      if (!isNum(labelCol) && !isNum(wrapperCol)) {
        return null;
      }
      return {
        label: isNum(labelCol) ? labelCol : 24 - (wrapperCol || 0),
        wrapper: isNum(wrapperCol) ? wrapperCol : 24 - (labelCol || 0),
      };
    },
  },
  methods: {
    merge() {
      const args = [].slice.call(arguments, 0);
      return Object.assign([].concat({}, args));
    },
    getLabelStyle(labelStyle) {
      return this.merge({ opacity: 0.6 }, this.labelStyle, labelStyle);
    },
    getWrapperStyle(wrapperStyle) {
      return this.merge({ opacity: 1 }, this.wrapperStyle, wrapperStyle);
    },
  },
};
</script>

<style scoped></style>
